<template>
  <view class="content" :style="{ height: `${windowHeight}px` }">
    <view class="body">
         <view class="body-top">
           <view class="body-top-my">
             {{costCustomer.totalBalance}}
           </view>
           <view class="body-top-title">
             账户余额
           </view>
         </view>
      <view class="body-top-btn">
        <u-button type="info" shape="circle" size="large" @click="toRecharge">去充值</u-button>
      </view>
      <view class="body-bottom">
         <view class="body-bottom-item">
           电子钱包：{{costCustomer.principalBalance}}(元)
         </view>
        <view class="body-bottom-item">|</view>
         <view class="body-bottom-item">
           赠送金额：{{costCustomer.giftBalance}}(元)
         </view>
       </view>
    </view>
    <view class="bottom">
      <u-cell-group>
        <u-cell  title="充值记录" :isLink="true"></u-cell>
        <u-cell  title="转增记录" :isLink="true"></u-cell>
      </u-cell-group>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import modal from "@/plugins/modal";
import { getUserCost } from '@/api/pay/cost'

const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50);
const costCustomer = ref({});

onMounted(() => {
  getCost();
});

function getCost() {
  getUserCost().then(res => {
    if (res.code === 200){
      costCustomer.value = res.data;
    }
  })
}

function toRecharge() {
  uni.navigateTo({
    url: '/pages_money/pages/recharge/index'
  });
}

</script>

<style scoped>

.content{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.body{
  width: 100%;
  height: 100%;
  background-color: #39b100;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 1vh;
  margin: 1vh;
}

.body-top{
  padding: 4vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.body-top-my{
  font-size: 8vh;
  font-weight: bold;
  padding: 15vh 5vh 1vh 5vh;
}

.body-top-btn{
  width: 60%;
}

.body-bottom{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.body-bottom-item{
  padding: 1vh;
  margin: 0 1vh;
}


.bottom{
  width: 100%;
}
</style>